<!DOCTYPE html>
<html>
<head>
    <title>应用表</title>
    <#include "../../include/head-file.ftl">
    <script src="${base}/static/plugins/sockjs/1.4.0/sockjs.min.js"></script>
    <script src="${base}/static/plugins/stomp/2.3.3/stomp.min.js"></script>
</head>
<body>
<div id="index" v-cloak class="ms-index">

    <el-header class="ms-header" height="50px">
        <el-col :span="12">
            <el-button size="small" plain @click="backupAll" :loading="backupAllLoading">
                备份全部数据
                <el-tooltip>
                    <div slot="content">
                        1、sql文件将保存在ms.website.bakup配置路径下
                        2、ms.website.bakup配置默认为项目下sql-bak文件夹
                    </div>
                    <i class="el-icon-question"></i>
                </el-tooltip>
            </el-button>
        </el-col>
    </el-header>
    <el-main class="ms-container">
        <el-table height="calc(100vh - 68px)" v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark">
            <template slot="empty">
                {{emptyText}}
            </template>
            <el-table-column label="sql文件"   align="left" prop="sqlFile">
            </el-table-column>
            <el-table-column label="文件大小"   align="left" prop="fileSize">
                <template slot-scope="scope">
                    {{scope.row.fileSize}}Mb
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="rollBack(scope.row.sqlFile)" :loading="rollBackLoading">还原数据</el-link>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
</div>
</body>

</html>
<script>
    var indexVue = new Vue({
        el: '#index',
        data:{
            rollBackLoading:false,
            backupAllLoading:false,
            conditions:[],
            dataList: [], //列表
            manager: ms.manager,
            loadState:false,
            loading: true,//加载状态
            emptyText:'',//提示文字
            stompClient: null,
        },
        watch:{
        },
        methods:{
            //备份数据
            backupAll: function () {
                var that = this;
                this.backupAllLoading = true;
                ms.http.get(ms.manager+"/mwebsite/backup/backupAll").then(function (res) {
                    if(res.result){
                        that.$notify({
                            title: '成功',
                            message: '备份成功',
                            type: 'success'
                        });
                        that.list()
                    }else {
                        that.$notify({
                            title: '失败',
                            message: '备份失败',
                            type: 'warning'
                        });
                    }
                }).finally(function () {
                    that.backupAllLoading = false
                })
            },
            //查询列表
            list: function() {
                var that = this;
                that.loading = true;
                that.loadState = false;
                ms.http.get(ms.manager+"/mwebsite/backup/sqlFileList").then(function (res) {
                    if(res.result){
                        that.dataList = res.data;
                        that.loading = false;
                    }else {
                        that.$notify({
                            title: '失败',
                            message: '获取文件列表失败',
                            type: 'warning'
                        });
                    }
                });
                setTimeout(function(){
                    if(that.loadState){
                        that.loading = false;
                    }else {
                        that.loadState = true
                    }
                }, 500);
            },
            //还原数据
            rollBack: function(sqlFile){
                this.rollBackLoading = true;
                var that = this;
                that.$confirm('此操作将会覆盖全部数据, 请谨慎操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.$notify({
                        title: '还原数据',
                        message: '操作成功\n后台正在还原数据\n具体进度请查看后台日志\n还原之后请重启系统',
                        type: 'info'
                    });
                    ms.http.post(ms.manager+"/mwebsite/backup/rollBack",{file:sqlFile}).then(function (res) {
                        if(res.result){
                            that.$notify({
                                title: '成功',
                                message: '数据还原成功',
                                type: 'success'
                            });

                        }else {
                            that.$notify({
                                title: '失败',
                                message: '数据还原失败',
                                type: 'warning'
                            });
                        }
                    }).finally(function () {
                        that.rollBackLoading = false
                    })
                });

            },
        },
        created:function(){
            this.list();
        },
        beforeDestroy:function(){
            if (this.stompClient){
                this.stompClient.disconnect();
            }
        },
    })
</script>
<style>
    #index .ms-container {
        height: calc(100vh - 78px);
    }    /* 让column渲染的数据识别\n*/
    .el-tooltip__popper {
        white-space: pre-line;
    }
    .el-notification {
        white-space:pre !important;
    }

</style>
